<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>天气案例监视属性简写</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      <h2>今天天气很{{info}}</h2>
      <br />
      <h2>出去玩不玩？{{playPlan}}</h2>
      <button @click="changeWeather">切换天气，函数方式</button>
    </div>
  </body>

  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        isHot: true,
        isPlay: true,
      },
      computed: {
        info() {
          return this.isHot ? "炎热" : "凉爽";
        },
        playPlan() {
          return this.isPlay ? "太热不出去玩" : "天气不错，出去玩";
        },
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot;
          this.isPlay = !this.isPlay;
        },
      },
      watch: {
        // 1：正常写法，完整的写法
        /* isHot: {
          immediate: true,
          handler(newValue, oldValue) {
            console.log(
              "默认属性isHot被修改了，新值" + newValue + "，旧值" + oldValue
            );
          },
        }, */

        //只需要handler的时候，可直接将属性名当作函数名使用
        //简写的代价就是不能添加其他处理了，例如深度监视，初始执行等。
        isHot(newValue, oldValue) {
          console.log(
            "默认属性isHot被修改了，新值:" + newValue + "，旧值:" + oldValue
          );
        },
      },
    });

    //2：在外部给VM添加监视属性，注意属性要带引号(上面的是内部省略了)   第二个参数为监视操作函数
    /* vm.$watch("playPlan", {
      immediate: true,
      handler(newValue, oldValue) {
        console.log(
          "计算属性playPlan被修改了，新值" + newValue + "，旧值" + oldValue
        );
      },
    }); */

    //在外部补充时，如果只需要handler，同样可以简写
    vm.$watch("playPlan", function (newValue, oldValue) {
      console.log(
        "计算属性playPlan被修改了，新值:" + newValue + "，旧值:" + oldValue
      );
    });


  </script>
</html>
